import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import React from "react"
import { useSession } from "next-auth/react";
export function SheetBox() {
  const { data: session } = useSession();
  const user = session?.user;
  return (
    <Sheet>
        <SheetTrigger asChild>
          <Button variant="link">
            {user && <div>{user.email}</div>}
          </Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>修改密码</SheetTitle>
            <SheetDescription>在此更改您的个人资料。完成后单击保存</SheetDescription>
          </SheetHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="name" className="text-right ml-4">
                密码
              </Label>
              <Input id="name" value="Pedro Duarte" className="col-span-2" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="username" className="text-right ml-4">
                再次确认
              </Label>
              <Input id="username" value="@peduarte" className="col-span-2" />
            </div>
          </div>
          <SheetFooter>
            <SheetClose asChild>
              <Button type="submit">保存</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
  )
}
